import './UserSetLock.scss'
import { lazy, useEffect, useState } from 'react'

import { Button, Tooltip, Spin, Input, Space } from 'antd'
import { SwapOutlined } from '@ant-design/icons'
import { DrawerBox } from '..'
import { useEventEmitter, useSessionStorageState } from 'ahooks'


const UserSetLock = ({ Off, ModalEvent }) => {
    const [, setLockScreen] = useSessionStorageState('LockPwd', { defaultValue: '' })
    const [Active, setActive] = useState('A01')
    const [Password, setPassword] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const [Template, setTemplate] = useState()
    useEffect(() => {
        const Lock = lazy(() => import(`../../View/LockScreen/${Active}.jsx`))
        setTemplate(Lock)
    }, [Active])

    const LockEvent = useEventEmitter()
    LockEvent.useSubscription(val => {
        if (val.type === 'SelectLock') setActive(val.data)
    })

    const onSelect = () => {
        setOptionsCall({ type: 'SelectLockScreen', data: Active, width: 1000 })
    }

    const onSubmit = () => {
        setLockScreen(Password)
        Off()
        setTimeout(() => ModalEvent.emit({ type: 'Lock', data: Active }), 150)
    }

    if (Template) {
        return (
            <div className='UserSetLock'>
                <Tooltip placement='right' title="切换动画">
                    <Button className='Switch' type='primary' shape="circle" icon={<SwapOutlined />} onClick={onSelect} />
                </Tooltip>
                <div className='Amination'>
                    <Template />
                </div>
                <div className='LockPwd'>
                    <Space.Compact >
                        <Input.Password variant="filled" placeholder='请输入锁屏密码' value={Password} onChange={e => setPassword(e.target.value)} />
                        <Button type="primary" onClick={onSubmit}>锁屏</Button>
                    </Space.Compact>
                </div>
                <DrawerBox OptionsCall={OptionsCall} ModalEvent={LockEvent} />
            </div>
        )
    } else {
        return (
            <div className='UserSetLock'>
                <Spin size="large" />
            </div>
        )
    }
};

export default UserSetLock;